import { Component, OnInit } from 'angular2/core';
import { Hero } from '../../model/hero';
import { HeroDetailComponent } from './detail.component';
import { HeroService } from '../../fasade/hero.service';
import { Router } from 'angular2/router';

@Component({
    selector: 'my-heroes',
    templateUrl: 'app/bundles/hero/tpls/list.component.html',
    styleUrls:['app/bundles/hero/css/list.css'],
directives: [HeroDetailComponent]
})
export class HeroListComponent implements OnInit {
    selectedHero: Hero;
    heroes: Hero[];
    
    title = 'Tour of heroes';
    
    constructor(
        private _heroService: HeroService,
        private _router: Router
    ) { }
        
    onSelect(hero: Hero) {
        this.selectedHero = hero;
    }
    
    gotoDetail() {
        let link = ['HeroDetail', {id: this.selectedHero.id}];
        this._router.navigate(link);
    }
    
    ngOnInit() {
        this._heroService.getHeroes()
            .then(heroes => this.heroes = heroes);
    }
}
